<script lang="ts" setup>
import { computed, inject, onMounted, reactive, ref, watch, onUnmounted, provide, useSlots, VNode, Component } from 'vue';
import { tabPaneProps } from './tab-pane';
import { tabPaneRootContextKey, tabsRootContextKey } from '../../../tokens/tabs';
defineOptions({ name: 'WindowsTabPane' });
const props = defineProps(tabPaneProps);
const tabsRoot = inject(tabsRootContextKey);
const active = computed(() => tabsRoot.currentName.value === props.name);
const paner = ref<HTMLElement | null>(null);
const form = ref(null);
const slots = useSlots();
if (slots && slots.default) {
  slots.default().forEach((vn: VNode) => {
    const component = vn.type as Component;
    //console.log(component.name);
  });
}
const width = ref(props.width ?? 800);
const height = ref(props.height ?? 600);
const maximize = ref(false);
const minimize = ref(false);
const left = ref(0);
const top = ref(0);
const pane = reactive({
  props,
  active,
  minimize: minimize,
});
watch(
  active,
  value => {
    if (value) {
      minimize.value = false;
    }
  },
  { immediate: true }
);
const initDrag = () => {
  paner.value.style.width = width.value + 'px';
  paner.value.style.height = height.value + 'px';
  window.onresize = () =>
    (() => {
      //onresize();
    })();
  onresize();
};

const onresize = () => {
  left.value = (props.target.offsetWidth - paner.value.clientWidth) / 2;
  top.value = (props.target.offsetHeight - paner.value.clientHeight) / 2;
  paner.value.style.left = left.value + 'px';
  paner.value.style.top = top.value + 'px';
};
// 最大化
const handleMaximize = () => {
  //最大化动画
  paner.value.style.transition = 'all 0.14s linear';
  if (maximize.value === false) {
    left.value = parseInt(paner.value.style.left);
    top.value = parseInt(paner.value.style.top);
    const bottomHeight = window.document.body.clientHeight - props.target.clientHeight;
    // paner.value.style.width = props.target.clientWidth + 'px';
    paner.value.style.width = '100%';
    paner.value.style.height = '100%';
    // paner.value.style.height = props.target.clientHeight - bottomHeight + 'px';
    paner.value.style.left = '0';
    paner.value.style.top = '0';
    maximize.value = true;
  } else {
    paner.value.style.height = height.value + 'px';
    paner.value.style.width = width.value + 'px';
    paner.value.style.left = left.value + 'px';
    paner.value.style.top = top.value + 'px';
    maximize.value = false;
  }
  setTimeout(() => {
    paner.value.style.transition = '';
  }, 140);
};
//最小化
const handleMinimize = () => {
  minimize.value = true;
  tabsRoot.minimizePane(props.name);
};
//移除tab
const handleTabRemove = () => {
  tabsRoot.removePane(props.name);
};
//选中tab
const handleTabActive = () => {
  tabsRoot.currentName.value = pane.props.name;
};
onMounted(() => {
  tabsRoot.registerPane(pane);
  initDrag();
});
onUnmounted(() => {
  tabsRoot.unregisterPane(pane.props.name);
});
provide(tabPaneRootContextKey, {
  handleMinimize,
  handleMaximize,
  handleTabRemove,
  props,
  active,
});
</script>

<template>
  <div ref="paner" :class="['windows-tab-pane', maximize ? 'fullscreen' : '']" :style="{ 'z-index': active ? 10 : 1 }" @mousedown="handleTabActive" v-show="!minimize" v-drag>
    <slot ref="form"></slot>
  </div>
</template>

<style lang="scss" scoped>
.windows-tab-pane {
  //box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04);
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  //width: 800px;
  .windows-tab-pane__header {
    display: flex;
    justify-content: space-between;
    height: 30px;
    user-select: none;
    .windows-tab-pane__title {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 5px;
      span {
        margin-left: 5px;
      }
    }
  }
  .windows-tab-pane__btnwrapper {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    height: 30px;
    .windows-tab-pane__btn {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        background: #e9e9eb;
      }
      &:last-child {
        border-top-right-radius: 5px;
        &:hover {
          color: #fff;
          background: #c45656;
        }
      }
    }
  }
  .windows-tab-pane__content {
    background-color: #fff;
    flex: 1;
    overflow: hidden;
  }
}
</style>
